<template>
  <div class="weapon-page">
    <!-- 权限检查 -->
    <div v-if="!userStore.isAdmin" class="no-permission">
      <div class="no-permission-content">
        <h2>访问受限</h2>
        <p>您没有权限访问武器管理页面</p>
        <button @click="router.push('/weapon-display')" class="back-btn">返回武器展示</button>
      </div>
    </div>

    <!-- 管理员内容 -->
    <div v-else>
      <div class="page-header">
        <div class="header-left">
          <h1 class="page-title">武器管理系统</h1>
          <p class="page-subtitle">管理和查看所有武器信息</p>
        </div>
        <div class="header-actions">
          <button class="refresh-btn" @click="loadData" :disabled="loading">
            <span class="refresh-icon">🔄</span>
            {{ loading ? '刷新中...' : '刷新数据' }}
          </button>
          <button class="add-weapon-btn" @click="openAddModal" v-if="userStore.isAdmin">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            添加武器
          </button>
        </div>
      </div>
      
      <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <p>{{ error }}</p>
      <button @click="loadData" class="retry-btn">重试</button>
    </div>

    <!-- 搜索和筛选区域 -->
    <div v-else class="search-section">
      <div class="search-container">
        <div class="search-input-wrapper">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="搜索武器名称..." 
            class="search-input"
            @input="handleSearch"
          />
          <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        
        <div class="filter-wrapper">
          <select v-model="selectedHero" @change="handleHeroFilter" class="hero-filter">
            <option value="">所有英雄</option>
            <option v-for="hero in heroList" :key="hero.id" :value="hero.id">
              {{ hero.heroName }}
            </option>
          </select>
        </div>
      </div>
    </div>

    <!-- 武器展示区域 -->
    <div class="weapons-container">
      <div class="weapons-grid" v-if="filteredWeapons.length > 0">
        <div 
          v-for="weapon in filteredWeapons" 
          :key="weapon.weaponId" 
          class="weapon-card"
          @click="selectWeapon(weapon)"
          :class="{ active: selectedWeapon?.weaponId === weapon.weaponId }"
        >
          <div class="weapon-image">
            <img 
              :src="weapon.weaponSkillUrl || '/default-weapon.png'" 
              :alt="weapon.weaponName"
              @error="handleImageError"
            />
          </div>
          <div class="weapon-info">
            <h3 class="weapon-name">{{ weapon.weaponName }}</h3>
            <div class="weapon-hero" v-if="getHeroName(weapon.heroId)">
              <span class="hero-label">适用英雄:</span>
              <span class="hero-name">{{ getHeroName(weapon.heroId) }}</span>
            </div>
          </div>
          <div class="weapon-actions" v-if="userStore.isAdmin">
            <button class="edit-btn" @click.stop="editWeapon(weapon)" title="编辑武器">
              <span class="btn-icon">✏️</span>
              <span class="btn-text">编辑</span>
            </button>
            <button class="delete-btn" @click.stop="deleteWeapon(weapon)" title="删除武器">
              <span class="btn-icon">🗑️</span>
              <span class="btn-text">删除</span>
            </button>
          </div>
        </div>
      </div>
      
      <div v-else class="no-weapons">
        <div class="no-weapons-icon">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <h3>暂无武器数据</h3>
        <p>{{ searchQuery ? '没有找到匹配的武器' : '还没有添加任何武器' }}</p>
      </div>
    </div>

    <!-- 武器详情侧边栏 -->
    <div class="weapon-detail-sidebar" :class="{ active: selectedWeapon }">
      <div v-if="selectedWeapon" class="weapon-detail">
        <div class="detail-header">
          <h2>{{ selectedWeapon.weaponName }}</h2>
          <button class="close-detail" @click="selectedWeapon = null">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        
        <div class="detail-content">
          <div class="weapon-image-large">
            <img 
              :src="selectedWeapon.weaponSkillUrl || '/default-weapon.png'" 
              :alt="selectedWeapon.weaponName"
              @error="handleImageError"
            />
          </div>
          
          <div class="weapon-stats-detail">
            <div class="stat-row">
              <span class="stat-label">攻击力</span>
              <span class="stat-value">{{ selectedWeapon.attack }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">暴击率</span>
              <span class="stat-value">{{ selectedWeapon.critRate }}%</span>
            </div>
            <div class="stat-row" v-if="getHeroName(selectedWeapon.heroId)">
              <span class="stat-label">适用英雄</span>
              <span class="stat-value">{{ getHeroName(selectedWeapon.heroId) }}</span>
            </div>
          </div>
          
          <div class="weapon-description" v-if="selectedWeapon.weaponBackground">
            <h4>武器背景</h4>
            <p>{{ selectedWeapon.weaponBackground }}</p>
          </div>
          
          <div class="weapon-skill" v-if="selectedWeapon.weaponSkill">
            <h4>武器技能</h4>
            <p>{{ selectedWeapon.weaponSkill }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑武器弹窗 -->
    <div v-if="showAddModal || showEditModal" class="modal-overlay" @click="closeModals">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ showEditModal ? '编辑武器' : '添加武器' }}</h3>
          <button class="close-modal" @click="closeModals">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        
        <form @submit.prevent="submitWeapon" class="weapon-form">
          <div class="form-group">
            <label>武器名称</label>
            <input v-model="weaponForm.weaponName" type="text" required />
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>攻击力</label>
              <input v-model.number="weaponForm.attack" type="number" required />
            </div>
            <div class="form-group">
              <label>暴击率(%)</label>
              <input v-model.number="weaponForm.critRate" type="number" step="0.1" required />
            </div>
          </div>
          
          <div class="form-group">
            <label>适用英雄</label>
            <select v-model="weaponForm.heroId" required>
              <option value="">请选择英雄</option>
              <option v-for="hero in heroList" :key="hero.id" :value="hero.id">
                {{ hero.heroName }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label>武器背景</label>
            <textarea v-model="weaponForm.weaponBackground" rows="3"></textarea>
          </div>
          
          <div class="form-group">
            <label>武器技能</label>
            <textarea v-model="weaponForm.weaponSkill" rows="3"></textarea>
          </div>
          
          <div class="form-group">
            <label>武器图片URL</label>
            <input v-model="weaponForm.weaponSkillUrl" type="url" />
          </div>
          
          <div class="form-group">
            <label>技能效果URL</label>
            <input v-model="weaponForm.weaponSkillEffectUrl" type="url" />
          </div>
          
          <div class="form-actions">
            <button type="button" class="cancel-btn" @click="closeModals">取消</button>
            <button type="submit" class="submit-btn" :disabled="submitting">
              {{ submitting ? '提交中...' : (showEditModal ? '更新' : '添加') }}
            </button>
          </div>
        </form>
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { weaponApi } from '../api/weapon.js'
import { heroApi } from '../api/hero.js'

// 用户状态管理和路由
const userStore = useUserStore()
const router = useRouter()

// 权限检查
if (!userStore.isAdmin) {
  ElMessage.error('您没有权限访问武器管理页面')
  router.push('/weapon-display')
}

// 响应式数据
const weapons = ref([])
const heroList = ref([])
const searchQuery = ref('')
const selectedHero = ref('')
const selectedWeapon = ref(null)
const showAddModal = ref(false)
const showEditModal = ref(false)
const submitting = ref(false)
const loading = ref(true)
const error = ref(null)

// 武器表单数据
const weaponForm = reactive({
  weaponId: null,
  weaponName: '',
  attack: 0,
  critRate: 0,
  weaponBackground: '',
  weaponSkill: '',
  weaponSkillUrl: '',
  weaponSkillEffectUrl: '',
  heroId: ''
})

// 计算属性
const filteredWeapons = computed(() => {
  let filtered = weapons.value
  
  // 按名称搜索
  if (searchQuery.value) {
    filtered = filtered.filter(weapon => 
      weapon.weaponName.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }
  
  return filtered
})

// 方法
const loadWeapons = async () => {
  try {
    const response = await weaponApi.getAllWeapons()
    if (response.code === 0) {
      weapons.value = response.data || []
    } else {
      error.value = response.message || '获取武器数据失败'
      ElMessage.error(error.value)
    }
  } catch (err) {
    console.error('加载武器列表失败:', err)
    error.value = '网络错误，请稍后重试'
    ElMessage.error('加载武器列表失败')
  }
}

const loadHeroes = async () => {
  try {
    const response = await heroApi.getAllHeroes()
    if (response.code === 0) {
      heroList.value = response.data || []
    } else {
      console.error('加载英雄列表失败:', response.message)
    }
  } catch (err) {
    console.error('加载英雄列表失败:', err)
  }
}

const getHeroName = (heroId) => {
  const hero = heroList.value.find(h => h.id === heroId)
  return hero ? hero.heroName : ''
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const handleHeroFilter = async () => {
  if (!selectedHero.value) {
    // 如果没有选择英雄，加载所有武器
    await loadWeapons()
    return
  }
  
  try {
    loading.value = true
    error.value = null
    
    // 调用后端接口获取指定英雄的武器列表
    const response = await weaponApi.getWeaponsByHeroId(selectedHero.value)
    
    if (response.code === 0) {
      weapons.value = response.data || []
    } else {
      error.value = response.message || '获取武器数据失败'
      ElMessage.error(error.value)
    }
    
  } catch (err) {
    console.error('筛选武器失败:', err)
    error.value = '网络错误，请稍后重试'
    ElMessage.error('筛选武器失败')
  } finally {
    loading.value = false
  }
}

const selectWeapon = (weapon) => {
  selectedWeapon.value = weapon
}

const openAddModal = () => {
  resetForm()
  showAddModal.value = true
}

const editWeapon = (weapon) => {
  Object.assign(weaponForm, weapon)
  showEditModal.value = true
}

const deleteWeapon = async (weapon) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除武器 "${weapon.weaponName}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const response = await weaponApi.deleteWeapon(weapon.weaponId)
    
    if (response.code === 0) {
      ElMessage.success('删除成功')
      await loadWeapons()
      if (selectedWeapon.value?.weaponId === weapon.weaponId) {
        selectedWeapon.value = null
      }
    } else {
      ElMessage.error(response.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除武器失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 统一构建提交给后端的payload，兼容可能的id/weaponId命名
const buildWeaponPayload = (isEdit) => {
  const payload = {
    weaponName: (weaponForm.weaponName || '').trim(),
    attack: Number(weaponForm.attack) || 0,
    critRate: Number(weaponForm.critRate) || 0,
    weaponBackground: weaponForm.weaponBackground || '',
    weaponSkill: weaponForm.weaponSkill || '',
    weaponSkillUrl: weaponForm.weaponSkillUrl || '',
    weaponSkillEffectUrl: weaponForm.weaponSkillEffectUrl || '',
    heroId: Number(weaponForm.heroId) || 0
  }
  if (isEdit) {
    payload.id = weaponForm.weaponId
    payload.weaponId = weaponForm.weaponId
  }
  return payload
}

const submitWeapon = async () => {
  submitting.value = true
  try {
    let response
    if (showEditModal.value) {
      const payload = buildWeaponPayload(true)
      response = await weaponApi.updateWeapon(payload)
    } else {
      const payload = buildWeaponPayload(false)
      response = await weaponApi.addWeapon(payload)
    }
    
    if (response.code === 0) {
      ElMessage.success(showEditModal.value ? '更新成功' : '添加成功')
      closeModals()
      await loadWeapons()
    } else {
      ElMessage.error(response.message || (showEditModal.value ? '更新失败' : '添加失败'))
    }
  } catch (error) {
    console.error('提交武器失败:', error)
    ElMessage.error('操作失败')
  } finally {
    submitting.value = false
  }
}

const closeModals = () => {
  showAddModal.value = false
  showEditModal.value = false
  resetForm()
}

const resetForm = () => {
  Object.assign(weaponForm, {
    weaponId: null,
    weaponName: '',
    attack: 0,
    critRate: 0,
    weaponBackground: '',
    weaponSkill: '',
    weaponSkillUrl: '',
    weaponSkillEffectUrl: '',
    heroId: ''
  })
}

const handleImageError = (event) => {
  event.target.src = '/default-weapon.png'
}

// 统一的加载入口（供重试按钮使用）
const loadData = async () => {
  loading.value = true
  error.value = null
  try {
    await Promise.all([loadWeapons(), loadHeroes()])
  } catch (e) {
    console.error('加载数据失败:', e)
    error.value = '加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 组件挂载时加载数据
onMounted(async () => {
  loading.value = true
  try {
    await Promise.all([loadWeapons(), loadHeroes()])
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.weapon-page {
  min-height: calc(100vh - 70px);
  padding: 2rem;
  background: rgba(0, 0, 0, 0.7);
}

.no-permission {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
}

.no-permission-content {
  text-align: center;
  background: transparent;
  padding: 3rem;
  border-radius: 15px;
  /* backdrop-filter: blur(10px); */
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.no-permission-content h2 {  
  color: #ff6b6b;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.no-permission-content p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  opacity: 0.8;
}

.back-btn {
  background: #4ecdc4;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.back-btn:hover {
  background: #45b7aa;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.refresh-icon {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.refresh-btn:disabled .refresh-icon {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.search-section {
  margin-bottom: 2rem;
}

.search-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.search-input-wrapper {
  position: relative;
  min-width: 300px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
}

.filter-wrapper {
  min-width: 150px;
}

.hero-filter {
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-filter:focus {
  outline: none;
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
}

.hero-filter option {
  background: #333;
  color: #fff;
}

.add-weapon-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-weapon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.weapons-container {
  position: relative;
}

.weapons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-right: 0;
  transition: margin-right 0.3s ease;
}

.weapons-grid.with-sidebar {
  margin-right: 400px;
}

.weapon-card {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
}

.weapon-card:hover {
  transform: translateY(-5px);
  border-color: #4ecdc4;
  box-shadow: 0 10px 30px rgba(78, 205, 196, 0.3);
}

.weapon-card.active {
  border-color: #ff6b6b;
  box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
}

.weapon-image {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.weapon-image img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.weapon-card:hover .weapon-image img {
  transform: scale(1.05);
}

.weapon-info {
  margin-bottom: 1rem;
}

.weapon-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5rem;
}

.weapon-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.stat-value {
  font-size: 1rem;
  font-weight: bold;
  color: #4ecdc4;
}

.weapon-hero {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.hero-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.hero-name {
  font-size: 0.9rem;
  color: #ff6b6b;
  font-weight: 500;
}

.weapon-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.weapon-card:hover .weapon-actions {
  opacity: 1;
}

.edit-btn,
.delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.btn-icon {
  font-size: 0.9rem;
}

.btn-text {
  font-size: 0.8rem;
  font-weight: 500;
}

.edit-btn {
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
}

.edit-btn:hover {
  background: #4ecdc4;
  color: #fff;
}

.delete-btn {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.delete-btn:hover {
  background: #ff6b6b;
  color: #fff;
}

.no-weapons {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(255, 255, 255, 0.6);
}

.no-weapons-icon {
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-weapons h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
}

/* 武器详情侧边栏 */
.weapon-detail-sidebar {
  position: fixed;
  top: 70px;
  right: -400px;
  width: 400px;
  height: calc(100vh - 70px);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(15px);
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.weapon-detail-sidebar.active {
  right: 0;
}

.weapon-detail {
  padding: 2rem;
  height: 100%;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-header h2 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0;
}

.close-detail {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-detail:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.weapon-image-large {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2rem;
  background: rgba(255, 255, 255, 0.05);
}

.weapon-image-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weapon-stats-detail {
  margin-bottom: 2rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row .stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

.stat-row .stat-value {
  color: #4ecdc4;
  font-weight: bold;
  font-size: 1.1rem;
}

.weapon-description,
.weapon-skill {
  margin-bottom: 2rem;
}

.weapon-description h4,
.weapon-skill h4 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.weapon-description p,
.weapon-skill p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 2rem;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  backdrop-filter: blur(15px);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  color: #fff;
  font-size: 1.5rem;
  margin: 0;
}

.close-modal {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-modal:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.weapon-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #4ecdc4;
  background: rgba(255, 255, 255, 0.15);
}

.form-group select option {
  background: #333;
  color: #fff;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.cancel-btn,
.submit-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.submit-btn {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: #fff;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 加载和错误状态样式 */
.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #4ecdc4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-container p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
}

.error-container p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.retry-btn {
  padding: 0.8rem 2rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .weapons-grid.with-sidebar {
    margin-right: 0;
  }
  
  .weapon-detail-sidebar {
    width: 100%;
    right: -100%;
  }
}

@media (max-width: 768px) {
  .weapon-page {
    padding: 1rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-wrapper {
    min-width: auto;
  }
  
  .weapons-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    padding: 1.5rem;
  }
}
</style>